<template>
	<div class="chat-manage">
		<el-row :gutter="24" style="margin-bottom: 8px">
			<el-col>
				<el-button type="danger">批量删除</el-button>
				<el-button type="primary" @click="reload">刷新</el-button>
			</el-col>
		</el-row>

		<template  v-if="conberstations.length !== 0">
			<el-collapse v-model="activeName" accordion @change="collapseChange">
				<el-collapse-item v-for="item in conberstations" :name="item">
					<template #title>
						<el-descriptions :column="2" direction="horizontal" border>
							<el-descriptions-item label="会话id">
								<template #default>
									<div style="width: 300px;">{{item}}</div>
								</template>
							</el-descriptions-item>
							<el-descriptions-item label="操作">
								<template #default>
									<el-button type="danger" @click.stop="deleteConberstations(item)">删除</el-button>
									<el-button :type="activeName == item ? '' :'primary'">{{activeName == item ? '收起' : '展开'}}</el-button>
								</template>
							</el-descriptions-item>
						</el-descriptions>
					</template>
					<el-table :data="chatHistorys" border stripe style="width: 100%">
						<el-table-column prop="id" label="id" width="100"></el-table-column>
						<el-table-column prop="content" label="内容">
							<template #default="{row}">{{contentFormat(row.content)}}</template>
						</el-table-column>
						<el-table-column label="时间" width="240" align="center">
							<template #default="{row}">{{dateFormat(row.timestamp)}}</template>
						</el-table-column>
						<el-table-column label="操作" width="180" align="center">
							<template #default="{row}">
								<el-button type="primary" @click="showDetail(row.content)">详情</el-button>
								<el-button type="danger" @click="deleteHistory(row.id)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-collapse-item>
			</el-collapse>
			<div style="margin-top: 8px; display: flex; justify-content: flex-end;">
				<el-pagination background layout="prev, pager, next" :total="conberstationTotal" @current-change="pageChange"/>
			</div>
		</template>
		<el-empty description="暂无内容!" v-else></el-empty>


	</div>

	<el-dialog v-model="dialogShow" title="详情" width="50%">
		<div v-html="dialogContent"></div>
		<template #footer>
			<el-button @click="dialogShow = false" type="primary">关闭</el-button>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import {ref, reactive} from 'vue'
import {conversationIds, getChatHistory, chatbot_conversation_delete} from '/@/api/chatbot'
import dayjs from 'dayjs'
import {ElMessageBox} from 'element-plus'
import {useMessage} from "/@hooks/message";


const deleteConberstations = async (conversation_id)=> {
	await ElMessageBox.confirm(
		'确认删除该会话及所属聊天记录?',
		'Warning',
		{
			confirmButtonText: '确认',
			cancelButtonText: '取消',
			type: 'warning',
		}
	)
	const res = await getChatHistory({conversation_id: conversation_id})
	const ids = res.data.map(item => item.id)
	for(const id of ids){
		chatbot_conversation_delete(id)
	}
	useMessage().success('删除成功!')
	reload()
}

//删除聊天记录
const deleteHistory = async (id: number)=> {
	await ElMessageBox.confirm(
		'确认删除该条记录?',
		'Warning',
		{
			confirmButtonText: '确认',
			cancelButtonText: '取消',
			type: 'warning',
		}
	)
	chatbot_conversation_delete(id)
	useMessage().success('删除成功!')
	await getHistorys()
}


//展开聊天内容
const dialogShow = ref(false)
const dialogContent = ref('')
const showDetail = content => {
	dialogContent.value = content
	dialogShow.value = true
}
//时间格式化
const dateFormat = time => {
	return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
}
//表格内容格式化
const contentFormat = content => {
	const text = content.replace(/<img src="(.*)" alt="(.*)">/g, '')
	if(text.length > 100){
		return `${text.slice(0, 100)}...`
	}
	return text
}

//会话列表查询参数
const params = reactive({
	page: 1,
	page_size: 10,
})

//会话列表
const conberstations = ref([])
const conberstationTotal = ref(0)
const getConversations = async () => {
	const res = await conversationIds(params)
	conberstations.value = res.data.conversation_ids
	conberstationTotal.value = res.data.total
}
//页码变化
const pageChange = page => {
	params.page = page
	getConversations()
}

//会话下面的聊天列表
const chatHistorys = ref([])
//当前展开的折叠面板会话id
const activeName = ref('')
const getHistorys = async ()=> {
	const res = await getChatHistory({conversation_id: activeName.value})
	chatHistorys.value = res.data
}
//手风琴折叠面板打开
const collapseChange = value => {
	chatHistorys.value = []
	getHistorys()
}

//刷新
const reload = ()=> {
	conberstations.value = []
	params.page = 1
	activeName.value = ''
	getConversations()
}

const init = ()=> {
	getConversations()
}
init()
</script>

<style lang="scss" scoped>
.chat-manage{
	width: 100%;
	padding: 14px;

}
</style>
